<template>
  <n-space vertical>
    <!--头部-->
    <n-layout-header style="height: 60px; " bordered>
      <!--左侧 logo 文字-->
      <n-button text class="n_button_top" strong @click="onHome">
        <img class="logo" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" alt="">
        <n-text class="n_text_top">中信银行实习平台后台管理系统</n-text>
      </n-button>
      <!--右侧用户操作-->
      <n-dropdown trigger="click" :options="options" class="n_dropdown_top">
        <n-button  quaternary class="n_button_user" >
          <n-avatar round  size="small" :src="user.avatar" style="margin-right: 5px"/>
          <n-text class="n_text_user" style="margin-right: 5px">{{ user.name }}</n-text>
          <n-tag type="info" size="small" class="n_tag_user">{{ user.role }}</n-tag>
        </n-button>
      </n-dropdown>
    </n-layout-header>
    <!--菜单主框架-->
    <n-layout has-sider position="absolute" style="top: 60px">
      <!--  侧边栏-->
      <n-layout-sider
          bordered
          collapse-mode="width"
          :collapsed-width="64"
          :width="240"
          :collapsed="collapsed"
          show-trigger
          @collapse="collapsed = true"
          @expand="collapsed = false"
      >
        <!--          滚动条-->
        <n-scrollbar style="max-height: 100vh">
          <!--          菜单-->
          <n-menu
              v-model:value="activeKey"
              :collapsed="collapsed"
              :collapsed-width="64"
              :collapsed-icon-size="22"
              :options="menuOptions"
          />
        </n-scrollbar>
      </n-layout-sider>
      <!--  主体区-->
      <router-view/>
    </n-layout>
  </n-space>
  <!--  修改密码-->
  <n-modal v-model:show="showModal" preset="card" :style="bodyStyle" title="修改密码" :segmented="segmented">
    <!--表单-->
    <n-form :rules="rules" :model="formValue">
      <n-form-item path="user.password" label="密码">
        <n-input
            show-password-on="click"
            placeholder="请输入密码"
            v-model:value="formValue.user.password"
            type="password"
        >
        </n-input>
      </n-form-item>
      <n-form-item path="user.password_confirmation" label="确认密码">
        <n-input
            show-password-on="click"
            placeholder="请再次输入密码"
            v-model:value="formValue.user.password_confirmation"
            type="password"
        >
        </n-input>
      </n-form-item>
    </n-form>
    <template #footer>
      <n-space justify="end">
        <n-button @click="cancel">取消</n-button>
        <n-button type="info" @click="sure">确定</n-button>
      </n-space>
    </template>
  </n-modal>
</template>

<script>
import { defineComponent, h, ref } from "vue";
import { RouterLink } from "vue-router";
import { NIcon } from "naive-ui";
import { GetUserInfo, Password, RefreshToken } from "@/api/login"
// 图标库 引用
import {Home as Home_icon , User , UserMultiple , Result , Account as Account_icon , CloudServiceManagement , Calendar ,Image} from "@vicons/carbon";
import {CopyrightCircleOutlined ,SmileOutlined} from "@vicons/antd";
import {AddChartRound , RemoveRedEyeOutlined} from "@vicons/material"
import {AddressBookRegular} from "@vicons/fa"
import {Question24Regular} from "@vicons/fluent"
import {SettingsOutline, Pencil, LogOutOutline, Add} from "@vicons/ionicons5"
// 路由
import {useRouter } from "vue-router";
import {AddUser} from "@/api/account";

export default defineComponent({
  components: {Add},
  setup() {
    // 路由
    const router = useRouter()
    // 图标使用方法
    function renderIcon(icon) {
      return () => h(NIcon, null, {
        default: () => h(icon)
      });
    }
    // 创建 message 引用window.$message
    const message = window.$message
    // 侧边栏数据
    const menuOptions = [
      {
        label: () => h(
            RouterLink,
            { to: "/welcome" },
            { default: () => "首页" }
        ),
        key: "home",
        icon: renderIcon(Home_icon)
      },
      {
        label: () => h(
            RouterLink,
            { to: "/account" },
            { default: () => "求职者管理" }
        ),
        key: "account",
        icon: renderIcon(User)
      },
      {
        label: () => h(
            RouterLink,
            { to: "/boss" },
            { default: () => "招聘者管理" }
        ),
        key: "boss",
        icon: renderIcon(UserMultiple)
      },
      {
        label: () => h(
            RouterLink,
            { to: "/resume" },
            { default: () => "简历管理" }
        ),
        key: "resume",
        icon: renderIcon(Result)
      },
      {
        label: () => h(
            RouterLink,
            { to: "/company" },
            { default: () => "分行管理" }
        ),
        key: "company",
        icon: renderIcon(CopyrightCircleOutlined)
      },
      {
        label: () => h(
            RouterLink,
            { to: "/zone" },
            { default: () => "分行专区管理" }
        ),
        key: "zone",
        icon: renderIcon(CopyrightCircleOutlined)
      },
      {
        label: () => h(
            RouterLink,
            { to: "/industry" },
            { default: () => "行业管理" }
        ),
        key: "industry",
        icon: renderIcon(Account_icon)
      },
      {
        label: () => h(
            RouterLink,
            { to: "/position" },
            { default: () => "岗位管理" }
        ),
        key: "position",
        icon: renderIcon(CloudServiceManagement)
      },
      {
        label: () => h(
            RouterLink,
            { to: "/job" },
            { default: () => "职位管理" }
        ),
        key: "job",
        icon: renderIcon(AddChartRound)
      },
      {
        label: () => h(
            RouterLink,
            { to: "/activity" },
            { default: () => "名校研读" }
        ),
        key: "activity",
        icon: renderIcon(Calendar)
      },
      {
        label: () => h(
            RouterLink,
            { to: "/apply" },
            { default: () => "应聘记录管理" }
        ),
        key: "apply",
        icon: renderIcon(AddressBookRegular)
      },
      {
        label: () => h(
            RouterLink,
            { to: "/browse" },
            { default: () => "浏览记录管理" }
        ),
        key: "browse",
        icon: renderIcon(RemoveRedEyeOutlined)
      },
      {
        label: () => h(
            RouterLink,
            { to: "/banner" },
            { default: () => "轮播图管理" }
        ),
        key: "banner",
        icon: renderIcon(Image)
      },
      {
        label: () => h(
            RouterLink,
            { to: "/service" },
            { default: () => "服务中心" }
        ),
        key: "service",
        icon: renderIcon(SmileOutlined)
      },
      {
        label: () => h(
            RouterLink,
            { to: "/help" },
            { default: () => "帮助中心管理" }
        ),
        key: "help",
        icon: renderIcon(Question24Regular)
      },
      {
        label: "系统内容管理",
        key: "dance-dance-dance",
        icon: renderIcon(SettingsOutline),
        children: [
          {
            label: () => h(
                RouterLink,
                { to: "/system/notice" },
                { default: () => "系统公告" }
            ),
            key: "notice",
          },
          {
            label: () => h(
                RouterLink,
                { to: "/system/about" },
                { default: () => "关于我们" }
            ),
            key: "about",
          },
          {
            label: () => h(
                RouterLink,
                { to: "/system/agreement" },
                { default: () => "用户协议" }
            ),
            key: "agreement",
          },
          {
            label: () => h(
                RouterLink,
                { to: "/system/privacy" },
                { default: () => "隐私政策" }
            ),
            key: "privacy",
          }
        ]
      }
    ];
    // 右上角登录账号信息
    const options = [
      {
        label: "退出登录",
        key: "退出成功",
        icon: renderIcon(LogOutOutline),
        props: {
          onClick:()=>{
            router.push({path:'/login'})
          }
        },
      },
      {
        label: "修改密码",
        key: "",
        icon: renderIcon(Pencil),
        // disabled: true
        props: {
          onClick:()=>{
            showModal.value = true
          }
        }
      }
    ]


    // 返回主页面
    function onHome(){
      router.push({path:'/welcome'})
    }

    // 模态框显示
    const showModal = ref(false)
    // 模态框样式
    const bodyStyle = {
      width: "500px",
    }
    const segmented = {
      content: "soft",
      footer: "soft"
    }
    // 取消模态框
    function cancel() {
      showModal.value = false
    }
    // 提交修改
    function sure() {
      let formData = {
        password: formValue.value.user.password,
        password_confirmation: formValue.value.user.password_confirmation
      }
      Password(formData).then(res => {
        console.log(res)
        if (res.code === 0){
          message.success("修改成功！")
          cancel()
        }else {
          message.error(res.message)
        }
      })
    }
    const formValue = ref({
      user: {
        password: '',
        password_confirmation: ''
      }
    })
    const rules = {
      user: {
        password: {
          required: true,
          trigger: "blur",
          message: "请输入密码！"
        },
        password_confirmation: {
          required: true,
          trigger: "blur",
          message: "请再次输入密码！"
        }
      }
    };

    GetUserInfo().then(res => {
      console.log(res)
      user.value.name = res.data.username
      user.value.avatar = res.data.avatar_url
      user.value.role = res.data.admin_role.name
    })

    const user = ref({
      name: '',
      avatar: '',
      role: ''
    })




    return {
      activeKey: ref(null),
      collapsed: ref(false),
      menuOptions,
      options,
      onHome,
      showModal,
      bodyStyle,
      segmented,
      cancel,
      sure,
      formValue,
      rules,
      user,



    };

  }
});
</script>

<style>
/*logo*/
.logo{
  width: 30px;
  height: 30px;
  margin-right: 10px;
//border: 1px solid black;
}
/*文本按钮*/
.n_button_top{
//border: 1px solid black;
  position: absolute;
  top: 15px;
  left: 20px;
}
.n_text_top{
  font-size: 18px;
  font-weight: bold;
}
/* user 下拉选项按钮 */
.n_button_user{
//width: 180px;
  width: 200px;
  height: 60px;
//border: 1px solid black;
  position: absolute;
  right: 20px;
//text-align: center;

}
.n_dropdown_top{
  width: 180px;
}
</style>